<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
</head>
<style>
    .ok-body {
        padding: 10px
    }
</style>

<body>
<div class="ok-body">

    <blockquote class="layui-elem-quote layui-text">
        资料上传
    </blockquote>

    <form class="layui-form" action="">
        <div class="layui-form-item">
            <input type="hidden" name="id" id="id"  th:value="${id}" >
            <label class="layui-form-label">标题</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" autocomplete="off"  class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">必填</div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-inline">
                <input type="text" name="description"  autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">标签</label>
            <div class="layui-input-inline">
                <select name="label" lay-verify="required" lay-filter="label">
                    <option value="">请选择标签</option>
                    <option value="1">说明书</option>
                    <option value="2">电路图</option>
                    <option value="3">配件清单</option>
                    <option value="4">专家经验</option>
                    <option value="5">其他</option>
                </select>
            </div>
            <div class="layui-form-mid layui-word-aux">必选</div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">相关设备</label>
            <div class="layui-input-inline">
                <select name="deviceId" id="device" lay-filter="deviceId" lay-search>
                    <option value="">选择相关设备</option>
                </select>
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">附件</label>
            <input type="hidden" name="fileUrl" id="fileUrl"/>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-normal" id="uploadFile">选择文件</button>
                    <button type="button" class="layui-btn" id="upBtn">开始上传</button>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <div class="layui-progress layui-progress-big" lay-filter="uploadProcess" lay-showPercent="yes">
                    <div class="layui-progress-bar layui-bg-green" id="progress" lay-percent="0%"></div>
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <textarea name="content" placeholder="请输入详细内容" class="layui-textarea"></textarea>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" name="status" lay-skin="switch" value="1" lay-filter="switchTest" lay-text="启用|禁用">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>

</div>

<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/js/jquery-3.2.1.min.js"></script>
<script src="../static/js/uploadXhrOnProgress.js"></script>
<!--<script src="../static/plugins/wangEditor/wangEditor.min.js"></script>-->
<script src="../static/js/jquery.base64.js"></script>
<script src="../static/js/device.js"></script>

<script th:inline="none">



    layui.use(['form','upload','element',], function(){
        var form = layui.form;
        var upload = layui.upload;
        var element = layui.element;
        var tableName = 'dataFile';
        var id = $('#id').val();


        //选完文件后不自动上传
        upload.render({
            elem: '#uploadFile'
            ,url: '../file/uploadDataFile'
            ,auto: false
            ,accept:'file'
            ,exts:'pdf'
            ,size:10240  //最大上传10M
            ,xhr:xhrOnProgress
            ,progress:function(value){//上传进度回调 value进度值
                element.progress('uploadProcess', value+'%')//设置页面进度条
            }
          //  ,field:''  //设定文件域的字段名 默认file
            ,bindAction: '#upBtn'
            ,choose:function (obj) {
                $('#progress').attr("lay-percent","0%");
                element.progress('uploadProcess', '0%');
                element.init();
            }
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
            }
            ,done: function(res){
                $('#fileUrl').val(res.data);
                layer.closeAll('loading'); //关闭loading
            }
            ,error: function(index, upload){
                layer.closeAll('loading'); //关闭loading
            }
        });


        if(id){
            //表示是修改页面
            var param =  'current=1&pageSize=2&searchCol=id&searchValue='+id;
            JJZ.requestTableData(tableName,param,function(data){
                var result = data.records[0];
                JJZ.named('name').val(result.name);
                JJZ.named('description').val(result.description);
                JJZ.named('content').val(result.content);
                JJZ.named('fileUrl').val(result.fileUrl);

                if(result.fileUrl && result.fileUrl!=''){
                    $('#progress').attr("lay-percent","100%");
                    element.progress('uploadProcess', '100%');
                    element.init();
                }

                result.status == 1? '': JJZ.named('status').removeAttr("checked");

                JJZ.named('label').find('option').each(function(index,elem){
                    $(elem).val() == result.label ? $(elem).attr("selected", "selected"):'';
                });

                //初始化设备编号下拉框
                JJZ.initSelectShowField(JJZ.named('deviceId'),'/device/dataGrid','number',function(noError){
                    if(noError){
                        JJZ.named('deviceId').find('option').each(function(index,elem){
                            $(elem).val() == result.deviceId ? $(elem).attr("selected", "selected"):'';
                        });
                        form.render(); //更新表单
                    }
                });

            });
        }else{
            //表示是新增页面

            //初始化设备编号下拉框
            JJZ.initSelectShowField(JJZ.named('deviceId'),'/device/dataGrid','number',function(noError){
                form.render(); //更新表单
            });

        }

        form.on('submit(submit)', function(data){
            data.field.status = data.field.status==1?1:0;
            var deviceInfo = $('#device option:selected').data();
            delete data.field.file;
            if(deviceInfo['number']){
                data.field.deviceNumber = deviceInfo['number'];
            }else{
                delete data.field.deviceId;
            }

            if(id){
                //编辑
                JJZ.editData(tableName,data.field,function(data){
                    window.location.href =JJZ.baseUrl+ '/'+tableName+'/dataFileDataGrid';
                });
            }else{
                //新增
                JJZ.addData(tableName,data.field,function(data){
                    window.location.href =JJZ.baseUrl+ '/'+tableName+'/dataFileDataGrid';
                });
            }

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });



    });
</script>
</body>
</html>